<template>
	<scroll-view class="conversations" scroll-y="true">

		<view v-show="currentUser!=null">
			<view class="header">
				<!--      <view>清除未读</view>-->

				<view @click="findFriends(1)">
					<image src="../../static/images/chat/friend.png"></image>
				</view>
				<!--      <view @click="findQun()"><image src="../../static/images/chat/group.png"></image></view>-->
				<view @click="tianJia()">
					<image src="../../static/images/chat/add_friend.png"></image>
				</view>
				<view @click="souSuo()">
					<image src="../../static/images/chat/search.png"></image>
				</view>
			</view>

			<view v-if="conversations.length > 0">
				<view class="scroll-item" v-for="(conversation, key) in conversations" :key="key">
					<view class="item-head">
						<image :src="conversation.data.avatar" class="head-icon"></image>
						<view class="item-head_unread" v-if="conversation.unread">{{ conversation.unread }}</view>
					</view>
					<view class="scroll-item_info" @click="chat(conversation)">
						<view class="item-info-top">
							<text class="item-info-top_name">{{ conversation.data.name }}</text>
							<view class="item-info-top_time">{{ formatDate(conversation.lastMessage.timestamp) }}</view>
						</view>
						<view class="item-info-bottom">
							<view class="item-info-bottom-item">
								<view class="item-info-top_content" v-if="!conversation.lastMessage.recalled">
									<text class="unread-text">
										{{
						  conversation.lastMessage.read === false && conversation.lastMessage.senderId === currentUser.id ? '[未读]' : ''
						}}
									</text>

									<text v-if="conversation.lastMessage.senderId === currentUser.id">我:</text>
									<text v-else>{{
						  conversation.type === 'group' ? conversation.lastMessage.senderData.name : conversation.data.name
						}}:
									</text>
									<text
										v-if="conversation.lastMessage.type === 'text'">{{ conversation.lastMessage.payload.text }}
									</text>
									<text v-else-if="conversation.lastMessage.type === 'video'">[视频消息]</text>
									<text v-else-if="conversation.lastMessage.type === 'audio'">[语音消息]</text>
									<text v-else-if="conversation.lastMessage.type === 'image'">[图片消息]</text>
									<text v-else-if="conversation.lastMessage.type === 'file'">[文件消息]</text>
									<text v-else-if="conversation.lastMessage.type === 'order'">[自定义消息:订单]</text>
									<text v-else>[[未识别内容]]</text>
								</view>
								<view class="item-info-top_content" v-else>

									<text v-if="conversation.lastMessage.senderId === currentUser.id">
										你撤回了一条消息
									</text>
									<view v-else>
										{{
						  conversation.type === 'group' ? conversation.lastMessage.senderData.name : conversation.data.name
						}}
										撤回了一条消息
									</view>
								</view>
								<view class="item-info-bottom_action" @click.stop="showAction(conversation)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-conversation" v-else>当前没有会话</view>


			<view class="action-container" v-if="actionPopup.visible">
				<view class="layer" @click="actionPopup.visible = false"></view>
				<view class="action-box">
					<view class="action-item" @click="topConversation">
						{{ actionPopup.conversation.top ? '取消置顶' : '置顶聊天' }}
					</view>
					<view class="action-item" @click="deleteConversation">删除聊天</view>
				</view>
			</view>
		</view>

		<view v-show="currentUser==null" class="hander-add">
			<view>
				<text>您还没有聊天用户，请注册一个聊天用户</text>
			</view>
			<view>
				<view class="hander-form">
					<h2>昵称：</h2>
					<input focus placeholder="最小3个字符,最大7个字符" v-model="formUserAdd.nickName" />
				</view>
				<!-- <view class="uni-form-item uni-column">
					<h2>是否商家：{{formUserAdd.business}}</h2>
					<radio-group name="radio">
						<label>
							<radio value="1" v-model="formUserAdd.business" /><text>是</text>
						</label>
						<label>
							<radio value="0" v-model="formUserAdd.business" /><text>否</text>
						</label>
					</radio-group>
				</view> -->
				<button @click="handleAdd">提交</button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	//如果有用到组件而不是页面的情况时，要注意onLoad是页面函数，不是组件函数，所以在页面当中引用components的时候onLoad函数不执行，因为没有钩子。
	import {
		getUserProfile
	} from "@/api/system/user";
	import {
		getUserBySystemId,
		addUser
	} from "@/api/chat/user.js";
	export default {
		name: 'conversation',
		data() {
			return {
				unreadTotal: 2,
				currentUser: null, //用户信息
				systemUser: {}, //系统用户信息
				formUserAdd: {
					nickName: '',
					business: '0',
					systemId: 0,
					headImage: 'http://192.168.8.247:9300/statics/2023/07/24/3c51362d7607464782afc3d947a14662_20230724155233A019.jpg'
				}, //注册用户时提交的内容
				conversations: [], //历史会话列表（每个好友和群的最后一条数据）
				actionPopup: {
					conversation: null,
					visible: false
				},
			}
		},
		onLoad() {
			//执行查询当前系统用户绑定的聊天用户，如果没有就提示创建一个
			this.getCurrentUser()
			//执行查询  历史会话列表（每个好友和群的最后一条数据）

		},
		onShow() {

		},
		beforeDestroy() {

		},
		methods: {
			//好友列表
			findFriends(id) {
				this.$tab.navigateTo('/pages/chat/findFriends')
			},
			//找群
			findQun() {
				this.$tab.navigateTo('/pages/chat/findQun')
			},
			//搜索
			souSuo(query) {
				this.$tab.navigateTo('/pages/chat/souSuo')
			},
			//添加好友或群
			tianJia(query) {
				this.$tab.navigateTo('/pages/chat/tianJia?query=' + query)
			},
			//执行查询当前系统用户绑定的聊天用户，如果没有就提示创建一个
			getCurrentUser() {
				getUserProfile().then(response => {
					this.systemUser = response.data

					getUserBySystemId(this.systemUser.userId).then(response => {
						//根据系统用户id查询到当前登录的聊天用户信息
						if (response.data) {
							this.currentUser = response.data;

							// this.initWebsocket();//链接通讯
							// this.componentName='ConversationsPrivate'
						}
						console.info(response.data)
					});
				});
			},
			handleAdd() {
				this.formUserAdd.systemId = this.systemUser.userId
				addUser(this.formUserAdd).then(response => {
					this.getCurrentUser()
				});
				// 您还没有聊天用户，请注册一个聊天用户
			},
			// 
			// reset() {
			//   this.form = {
			//     id: null,
			//     nickName: null,
			//     business: '0',
			//     headImage: null,
			//     systemId: null,
			//     createTime: null,
			//     updateTime: null
			//   };
			//   this.resetForm("form");
			// },    
			formatDate(t) {
				t = t || Date.now();
				let time = new Date(t);
				let str = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
				str += '-';
				str += time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				str += ' ';
				str += time.getHours();
				str += ':';
				str += time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
				return str;
			},
			renderConversations(content) {
				this.conversations = content.conversations;
			},

			topConversation() { //会话置顶
				this.actionPopup.visible = false;
				let conversation = this.actionPopup.conversation;
				let description = conversation.top ? '取消置顶' : '置顶';

			},
			deleteConversation() {
				uni.showModal({
					content: '确认删除这条会话吗？',
					success: (res) => {
						if (res.confirm) {
							let conversation = this.actionPopup.conversation;
							this.actionPopup.visible = false;

						} else {
							this.actionPopup.visible = false;
						}
					},
				})
			},
			chat(conversation) {
				console.info(123)
				let path = conversation.type === 'private' ?
					'./privateChat?to=' + conversation.userId :
					'./groupChat?to=' + conversation.groupId;
				uni.navigateTo({
					url: path
				});
			},
			showAction(conversation) {
				this.actionPopup.conversation = conversation;
				this.actionPopup.visible = true;
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.conversations {
		width: 750rpx;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100%;
	}

	.conversations .scroll-item {
		height: 152rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
	}

	.conversations .scroll-item .head-icon {
		width: 100rpx;
		height: 100rpx;
		margin-right: 28rpx;
	}

	.conversations .scroll-item_info {
		height: 151rpx;
		width: 590rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.conversations .scroll-item_info .item-info-top {
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.conversations .item-info-top_name {
		font-size: 34rpx;
		color: #262628;
	}

	.conversations .item-info-top_time {
		font-size: 34rpx;
		color: rgba(179, 179, 179, 0.8);
		font-family: Source Han Sans CN;
	}

	.conversations .item-info-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.conversations .item-info-bottom-item {
		display: flex;
		justify-content: space-between;
	}

	.item-info-bottom .item-info-top_content {
		font-size: 34rpx;
		color: #b3b3b3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.item-info-bottom .item-info-bottom_action {
		width: 50rpx;
		height: 50rpx;
		font-size: 34rpx;
		background: url("../../static/action.png") no-repeat center;
		background-size: 28rpx 30rpx;
	}

	.no-conversation {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 34rpx;
		color: #9D9D9D;
	}

	.item-head {
		position: relative;
	}

	.item-head .item-head_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 34rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 15rpx;
	}

	.action-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-container .layer {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(51, 51, 51, 0.5);
		width: 100%;
		height: 100%;
		z-index: 99;
	}

	.action-box {
		width: 400 rpx;
		height: 240 rpx;
		background: #ffffff;
		position: relative;
		z-index: 100;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.action-item {
		text-align: center;
		line-height: 120rpx;
		font-size: 34rpx;
		color: #262628;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.unread-text {
		color: #d02129;
	}

	.header {
		background-color: white;
		/* height: 90rpx; */
		/* border-radius: 0 0rpx 40rpx 40rpx; */
		box-shadow: #d2d2dd 0px 2px 20px 0px;
	}

	.header view {
		display: inline-block;
		position: relative;

		/* background-color: #d0eeed; */
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}

	.header view:nth-child(3),
	.header view:nth-child(4) {
		float: right;
	}

	.header view image {
		height: 100%;
		width: 100%;
	}

	.hander-add>view:nth-child(1) {
		text-align: center;
		color: #9D9D9D;
		padding: 20rpx 0 20rpx 0;
	}

	.hander-add>view:nth-child(2) {
		margin: 20rpx;
	}

	.hander-add>view:nth-child(2) input {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		height: 90rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		color: #838383;
	}

	.hander-add>view:nth-child(2) radio-group {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.hander-add>view:nth-child(2) text {
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-right: 50rpx;
	}
</style>